<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">新增案件</h1>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 mt-4 pb-20">
      <!-- 基本信息 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fas fa-info-circle text-blue-600 mr-2"></i>
          基本信息
        </h3>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">案件名称</label>
            <input 
              v-model="caseInfo.name"
              type="text" 
              placeholder="请输入案件名称"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">案件类型</label>
            <select 
              v-model="caseInfo.type"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">请选择案件类型</option>
              <option value="民事纠纷">民事纠纷</option>
              <option value="合同纠纷">合同纠纷</option>
              <option value="劳动纠纷">劳动纠纷</option>
              <option value="债权债务">债权债务</option>
              <option value="侵权纠纷">侵权纠纷</option>
            </select>
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">当事人</label>
              <input 
                v-model="caseInfo.plaintiff"
                type="text" 
                placeholder="原告姓名"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">被告</label>
              <input 
                v-model="caseInfo.defendant"
                type="text" 
                placeholder="被告姓名"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">争议金额</label>
            <input 
              v-model="caseInfo.amount"
              type="number" 
              placeholder="请输入争议金额"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">案件描述</label>
            <textarea 
              v-model="caseInfo.description"
              rows="4"
              placeholder="请简要描述案件情况"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
            ></textarea>
          </div>
        </div>
      </div>

      <!-- 案件备注 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-6">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fas fa-sticky-note text-yellow-600 mr-2"></i>
          案件备注
        </h3>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">重要提醒</label>
            <textarea 
              v-model="caseInfo.importantNotes"
              rows="3"
              placeholder="记录重要的案件提醒事项"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
            ></textarea>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">进度记录</label>
            <textarea 
              v-model="caseInfo.progressNotes"
              rows="3"
              placeholder="记录案件进展情况"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
            ></textarea>
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">其他备注</label>
            <textarea 
              v-model="caseInfo.otherNotes"
              rows="3"
              placeholder="其他需要记录的信息"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
            ></textarea>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex space-x-4">
        <button 
          @click="saveCase"
          class="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          保存案件
        </button>
        <button 
          @click="saveDraft"
          class="flex-1 bg-gray-500 text-white py-3 rounded-lg font-medium hover:bg-gray-600 transition-colors"
        >
          保存草稿
        </button>
      </div>
    </main>

    <!-- 悬浮备忘录按钮 -->
    <div class="fixed bottom-20 right-4 z-50">
      <button 
        @click="showMemo = !showMemo"
        class="w-14 h-14 bg-yellow-500 text-white rounded-full shadow-lg hover:bg-yellow-600 transition-colors flex items-center justify-center relative"
      >
        <i class="fas fa-sticky-note text-xl"></i>
        <span 
          v-if="memoCount > 0"
          class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center"
        >
          {{ memoCount }}
        </span>
      </button>
    </div>

    <!-- 备忘录弹窗 -->
    <div 
      v-if="showMemo"
      class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end"
      @click="showMemo = false"
    >
      <div 
        class="bg-white rounded-t-xl w-full max-h-96 overflow-hidden"
        @click.stop
      >
        <div class="p-4 border-b flex items-center justify-between">
          <h3 class="text-lg font-semibold">备忘录</h3>
          <button @click="showMemo = false">
            <i class="fas fa-times text-gray-400"></i>
          </button>
        </div>
        
        <div class="p-4 max-h-80 overflow-y-auto">
          <div class="mb-4">
            <textarea 
              v-model="newMemo"
              rows="3"
              placeholder="添加新的备忘录..."
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 resize-none"
            ></textarea>
            <button 
              @click="addMemo"
              class="mt-2 bg-yellow-500 text-white px-4 py-2 rounded-lg text-sm hover:bg-yellow-600"
            >
              添加备忘录
            </button>
          </div>
          
          <div class="space-y-2">
            <div 
              v-for="(memo, index) in memos" 
              :key="index"
              class="bg-yellow-50 border-l-4 border-yellow-400 p-3 rounded"
            >
              <p class="text-sm text-gray-700">{{ memo.content }}</p>
              <p class="text-xs text-gray-500 mt-1">{{ memo.time }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CaseAdd',
  data() {
    return {
      caseInfo: {
        name: '',
        type: '',
        plaintiff: '',
        defendant: '',
        amount: '',
        description: '',
        importantNotes: '',
        progressNotes: '',
        otherNotes: ''
      },
      showMemo: false,
      newMemo: '',
      memos: [
        {
          content: '记得收集相关证据材料',
          time: '2024-01-15 10:30'
        },
        {
          content: '下周二开庭，准备出庭材料',
          time: '2024-01-14 16:20'
        }
      ]
    }
  },
  computed: {
    memoCount() {
      return this.memos.length
    }
  },
  methods: {
    saveCase() {
      // 保存案件逻辑
      console.log('保存案件:', this.caseInfo)
      this.$router.push('/')
    },
    saveDraft() {
      // 保存草稿逻辑
      console.log('保存草稿:', this.caseInfo)
      this.$router.push('/')
    },
    addMemo() {
      if (this.newMemo.trim()) {
        this.memos.unshift({
          content: this.newMemo,
          time: new Date().toLocaleString('zh-CN')
        })
        this.newMemo = ''
      }
    }
  }
}
</script>

<style scoped>
.page-content {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>


